<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户列表页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/ajax.js"></script>
</head>
<body>
<div class="layui-panel">
  <form class="layui-form" style="margin: 10px auto">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label for="username" class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="username" id="username" placeholder="用户名精确查询">
        </div>
      </div>
      <div class="layui-inline">
        <label for="nickname" class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="nickname" id="nickname" placeholder="昵称模糊查询">
        </div>
      </div>
      <div class="layui-inline">
        <label for="phone" class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="phone" id="phone" placeholder="手机号精确查询">
        </div>
      </div>
      <div class="layui-inline">
        <label for="sex" class="layui-form-label">性别</label>
        <div class="layui-input-inline">
          <select name="sex" id="sex">
            <option value="">[选择性别]</option>
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未设置</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="role" class="layui-form-label">角色</label>
        <div class="layui-input-inline">
          <select name="role" id="role">
            <option value="">[选择角色]</option>
            <option value="1">管理员</option>
            <option value="2">负责人</option>
            <option value="3">操作员</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="status" class="layui-form-label">状态</label>
        <div class="layui-input-inline">
          <select name="status" id="status">
            <option value="">[选择状态]</option>
            <option value="1">可用</option>
            <option value="2">禁用</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
          <button type="reset" class="layui-btn">清空</button>
        </div>
      </div>
    </div>

  </form>
</div>
<div class="layui-panel">
  <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="toolbar">
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加</button>
</script>
<script type="text/html" id="statusTemp">
  {{# if(d.status === 1){ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-green" lay-event="status">可用</button>
  {{# }else{ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="status">禁用</button>
  {{# } }}
</script>
<script type="text/html" id="optTemp">
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="update">修改</button>
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="delete">删除</button>
</script>
<script>
  const {table,form} = layui;
  $(function () {
    table.render({
      elem:"#dataTable",
      url:"/userinfo/page",
      page:true,
      limit:5,
      limits:[5,10,20,50,100],
      toolbar:"#toolbar",
      cols:[[
        {field:"id",title:"编号"},
        {field: "username",title: "用户名"},
        {field: "nickname",title: "昵称"},
        {field: "phone",title: "手机号"},
        {field: "sex",title: "性别",templet:function (d) {
            switch (d.sex){
              case 1:
                return "男";
              case 2:
                return "女";
              case 3:
                return "未设置";
              default:
                return "性别异常";
            }
          }},
        {field: "role",title: "角色",templet:function (d) {
            switch (d.role){
              case 1:
                return "管理员";
              case 2:
                return "负责人";
              case 3:
                return "操作员";
              default:
                return "角色异常";
            }
          }},
        {field:"status",title: "状态",templet:"#statusTemp"},
        {title: "操作",templet:"#optTemp"}
      ]]
    });
    form.on("submit(searchBtn)",function (data) {
      table.reload("dataTable",{
        where:data.field,
        page:{
          curr:1
        }
      })
      return false;
    })
    table.on("tool(dataTable)",function (data) {
        const event = data.event;
        const id = data.data.id;
        switch (event){
          case "status":
            layer.confirm(`确定更改编号[${id}]的状态吗？`,{icon:3,title:"询问"},function (index) {
              ajax.post("/userinfo/status",{id,status:data.data.status === 1?2:1
              }).then(()=>{
                layer.msg("操作成功！",{icon:6});
                reloadTable();
              })
              layer.close(index);
            })
            break;
          case "delete":
            layer.confirm(`确定删除编号[${id}]的数据吗？`,{icon:3,title:"询问"},function (index) {
              ajax.delete("/userinfo/delete/"+id).then(()=>{
                layer.msg("删除成功！",{icon:6});
                reloadTable();
              })
              layer.close(index);
            })
            break;
          case "update":
            layer.open({
              type:2,
              content:"/userinfo/edit?id="+id,
              area:["500px","500px"]
            })
            break;
        }
    })
    table.on("toolbar(dataTable)",function (data) {
      if(data.event === "add"){
        layer.open({
          type:2,
          content:"/userinfo/edit",
          area:["500px","500px"]
        })
      }
    })
  })

  function reloadTable() {
    table.reload('dataTable');
  }
</script>
</html>
